﻿@{
    ViewBag.Title = Model.siteName+" - Đăng ký";
    ViewBag.Description = Model.htmlDescription;
    ViewBag.Keywords = Model.htmlKeywords;
}
@model BDShop.Models.RegisterModel

<!--Left Part-->
@Html.Partial("Partial/_LeftAccMenu", null)
<!--Left End-->
<!--Middle Part Start-->
<div id="content">
    <!--Breadcrumb Part Start-->
    <div class="breadcrumb"><a href="/">Trang chủ</a> » <a href="/thong-tin-tai-khoan.html">Tài khoản</a> » <a href="#">Đăng ký</a> </div>
    <!--Breadcrumb Part End-->
    <h1>Đăng ký</h1>
    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "frmRegister" }))
    {@Html.AntiForgeryToken()
         @Html.ValidationSummary(true, "", new { @class = "error" })<br/>
        <h2>Thông tin cá nhân</h2>
        <div class="content">
            <table class="form">
                <tbody>
                    <tr>
                        <td><span class="required">*</span> Họ và tên:</td>
                        <td>
                            <input class="large-field" type="text" value="" name="fullname">
                            &nbsp;
                            <label id="fullname-error" class="error valid" for="fullname"></label>
                        </td>

                    </tr>
                    <tr>
                        <td><span class="required">*</span> Giới tính:</td>
                        <td>
                            <select class="large-field" name="gender" id="gender">
                                <option value="">--- Vui lòng chọn --- </option>
                                <option value="1">Nam</option>
                                <option value="0">Nữ</option>
                            </select>
                            &nbsp;
                            <label id="gender-error" class="error valid" for="gender"></label>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="required">*</span> Ngày sinh:</td>
                        <td>
                            <input class="large-field" type="text" value="" name="birthday"> (dd/mm/yyyy)
                            &nbsp;
                            <label id="birthday-error" class="error valid" for="birthday"></label>
                        </td>

                    </tr>
                    <tr>
                        <td><span class="required">*</span>Địa chỉ:</td>
                        <td>
                            <input class="large-field" type="text" value="" name="address">
                            &nbsp;
                            <label id="address-error" class="error valid" for="address"></label>
                        </td>

                    </tr>
                    <tr>
                        <td><span class="required">*</span> E-Mail:</td>
                        <td>
                            <input class="large-field" type="text" value="" name="email">
                            &nbsp;
                            <label id="email-error" class="error valid" for="email"></label>
                        </td>

                    </tr>
                    <tr>
                        <td>Số điện thoại:</td>
                        <td>
                            <input class="large-field" type="text" value="" name="mobile">
                            &nbsp;
                            <label id="mobile-error" class="error valid" for="mobile"></label>
                        </td>

                    </tr>

                </tbody>
            </table>
        </div>
        <h2>Thông tin tài khoản</h2>
        <div class="content">
            <table class="form">
                <tbody>
                    <tr>
                        <td><span class="required">*</span> Tên đăng nhập:</td>
                        <td>
                            <input class="large-field" type="text" value="" name="username">
                            &nbsp;
                                <label id="username-error" class="error valid" for="username"></label>
                        </td>

                    </tr>
                    <tr>
                        <td><span class="required">*</span> Mật khẩu:</td>
                        <td>
                            <input class="large-field" type="password" value="" name="password" id="password">
                            &nbsp;
                                <label id="password-error" class="error valid" for="password"></label>
                        </td>

                    </tr>
                    <tr>
                        <td><span class="required">*</span> Xác nhận mật khẩu:</td>
                        <td>
                            <input class="large-field" type="password" value="" name="confirm">
                            &nbsp;
                                <label id="confirm-error" class="error valid" for="confirm"></label>
                        </td>

                    </tr>
                </tbody>
            </table>
        </div>

        <div class="buttons">
            <div class="left">

                <input type="submit" class="button" value="Đăng ký">
            </div>
        </div>
    }
</div>
<!--Middle Part End-->
<div class="clear"></div>


<script>

    $("#frmRegister").validate({
        rules: {
            fullname: {
                required: true
            },
            mobile: {
                number:true,
                minlength: 10,
                maxlength: 15
            },
            gender: {
                required: true
            },
            address: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            birthday: {
                birthdayOnly: true
            },
            username: {
                required: true,
                usernameOnly: true
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            confirm: {
                required: true,
                equalTo:"#password"
            }
        },
        messages: {
            fullname: "Vui lòng nhập họ tên đầy đủ.",
            mobile: "Số điện thoại không hợp lệ.",
            gender: "Vui lòng chọn giới tính.",
            address: "Vui lòng nhập địa chỉ.",
            email: "Email không hợp lệ.",
            birthday: "Ngày sinh không hợp lệ.",
            username: "Tên đăng nhập không hợp lệ.",
            password: "Mật khẩu không hợp lệ.",
            confirm: "Mật khẩu xác nhận không hợp lệ."
        }
    });

    $.validator.addMethod("numericOnly", function (value) {
        return /^[0-9]+$/.test(value);
    }, '');

    $.validator.addMethod("birthdayOnly", function (value) {
        return /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(value);
    }, '');

    $.validator.addMethod("usernameOnly", function (value) {
        return /^[A-Za-z0-9_]{3,20}$/.test(value);
    }, '');
   
</script>
